<template>
  <view class="contenter">
    <view class="bg-w techHead">
      <view class="input u-flex flex_bt" v-if="types != 1" @click="show = true">
        <view>{{store.name}}</view>
        <view>
          <u-icon name="arrow-down"  color="#ACACAC" size="28"></u-icon>
        </view>
      </view>
      <view class="u-flex headMian">
        <view class="headTime" @click="tabChangeIndex(index)" :key="index" :class="{'active':index == tabIndex}" v-for="(data,index) in time">{{data}}</view>
      </view>
    </view>
    <view>
      <scroll-view  scroll-y="true" class="scroll-Y" >
        <view v-if="dataList.length !=0">
          <view v-for="(data,index) in dataList" :key="index">
            <list-item :item="data" :index="index"></list-item>
          </view>
        </view>
        <view class="loading_text" v-else>
          <text>{{loadingText || '暂无数据'}}</text>
        </view>
      </scroll-view>
    </view>
    <u-picker mode="selector" :range="storeList" v-model="show" @confirm="confirm" range-key="name"></u-picker>
  </view>
</template>

<script>
import ListItem from "../../components/item/list-item";
export default {
  name: "technician",
  components: {ListItem},
  data(){
    return{
      time:['好评率优先','订单量优先','销售额优先'],
      storeList: [],
      store: {
        id:''
      },
      dataList:[],
      tabIndex:0,
      loadingText:'',
      page:0,
      allpage:'',
      types:2,
      type:1,//1-好评率优先 2-服务订单优先 3-销售额优先 不填默认显示好评
      show:false
    }
  },
  onLoad(option){
    this.types = option.type

    this.storeList = uni.getStorageSync('storeList')
    this.store = uni.getStorageSync('store')
    this.setData()
  },
  methods:{
    setData(){
      let form = {
        store_id:this.store.id,
        limit:10,
        page:this.page || 1,
        type:this.type,//1-好评率优先 2-服务订单优先 3-销售额优先 不填默认显示好评
      }
      let that = this
      this.$api.technicianRanking(form).then(res => {
        // this.allpage = res.data.last_page
        that.dataList = res.data
      })
    },
    //上拉加载
    onReachBottom(){
      if(this.page>=this.allpage){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.page ++
      this.setData()
    },
    tabChangeIndex(index){
      this.type = index + 1
      this.tabIndex = index
      this.setData()
    },
    confirm(e){
      this.store.name = this.storeList[e[0]].name
      this.store.id = this.storeList[e[0]].id
      this.store.image = this.storeList[e[0]].image
      this.setData()
    },
  }
}
</script>

<style scoped lang="scss">
.techHead{
  .headMian{
    padding: 0 32rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    .headTime{
      width: 218rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 8rpx;
      margin-right: 16rpx;
      color: $uni-text-color-inverse;
      font-size: 28rpx;
      border: 2rpx solid $uni-border-color;
      &:last-child{
        margin: 0;
      }
    }
    .active{
      background: $uni-color-primary;
      border: 2rpx solid $uni-color-primary;
      color: white;
    }
  }
  .input{
    height: 80rpx;
    border: 2rpx solid $uni-border-color;
    border-radius: 16rpx;
    margin: 0 32rpx;
    padding: 0 10rpx;
    box-sizing: border-box;
  }
}
.scroll-Y{
  height: 100vh;
}

</style>